<h1>Task executions</h1>

<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="!grouped ? null : selected"
              *ngIf="isInit" #datagrid>
  <clr-dg-action-bar *ngIf="grouped">
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="setMode(false)">
      Cancel
    </button>
    <button type="button" [disabled]="selected?.length === 0" class="btn btn-sm btn-secondary"
            (click)="cleanup(selected)" [appRole]="['ROLE_DESTROY']">
      Clean Up task execution(s)
    </button>
  </clr-dg-action-bar>
  <clr-dg-action-bar *ngIf="!grouped">
    <button type="button" class="btn btn-sm btn-secondary" (click)="setMode(true)" [appRole]="['ROLE_DESTROY']">
      Group Actions
    </button>
    <button type="button" class="btn btn-sm btn-secondary" (click)="refresh(state)">
      Refresh
    </button>
  </clr-dg-action-bar>
  <clr-dg-column [clrDgField]="'TASK_EXECUTION_ID'"
                 [clrDgSortOrder]="(context.by === 'TASK_EXECUTION_ID') ? context.reverse ? -1 : 1 : 0"
                 (clrDgColumnResize)="updateContext('sizeId', $event)"
                 [style.width.px]="context.sizeId | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Execution ID
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'TASK_NAME'"
                 [clrDgSortOrder]="(context.by === 'TASK_NAME') ? context.reverse ? -1 : 1 : 0"
                 (clrDgColumnResize)="updateContext('sizeName', $event)"
                 [style.width.px]="context.sizeName | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Task name
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column
    (clrDgColumnResize)="updateContext('sizeDuration', $event)"
    [style.width.px]="context.sizeDuration | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Duration
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'START_TIME'"
                 [clrDgSortOrder]="(context.by === 'START_TIME') ? context.reverse ? -1 : 1 : 0"
                 (clrDgColumnResize)="updateContext('sizeStart', $event)"
                 [style.width.px]="context.sizeStart | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Start Date
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'END_TIME'"
                 [clrDgSortOrder]="(context.by === 'END_TIME') ? context.reverse ? -1 : 1 : 0"
                 (clrDgColumnResize)="updateContext('sizeEnd', $event)"
                 [style.width.px]="context.sizeEnd | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      End Date
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'EXIT_CODE'"
                 [clrDgSortOrder]="(context.by === 'EXIT_CODE') ? context.reverse ? -1 : 1 : 0"
                 (clrDgColumnResize)="updateContext('sizeExit', $event)"
                 [style.width.px]="context.sizeExit | datagridcolumn: datagrid : contextName | async">
    <ng-container>
      Exit Code
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-row *ngFor="let execution of page?.items" [clrDgItem]="execution">
    <clr-dg-cell>
      <a routerLink="/tasks-jobs/task-executions/{{execution.executionId}}">{{execution.executionId}}</a>
    </clr-dg-cell>
    <clr-dg-cell>
      <a routerLink="/tasks-jobs/tasks/{{execution.taskName}}">{{execution.taskName}}</a>
    </clr-dg-cell>
    <clr-dg-cell>{{execution.startTime | duration: execution.endTime}}</clr-dg-cell>
    <clr-dg-cell>{{execution.startTime | datetime}}</clr-dg-cell>
    <clr-dg-cell>{{execution.endTime | datetime}}</clr-dg-cell>
    <clr-dg-cell>{{execution.exitCode}}</clr-dg-cell>
    <clr-dg-action-overflow *ngIf="!grouped">
      <button class="action-item" (click)="details(execution)">Details</button>
      <button class="action-item" (click)="taskDetails(execution)">Task details</button>
      <button class="action-item" (click)="relaunch(execution)" [appRole]="['ROLE_DEPLOY']">Relaunch task</button>
      <button class="action-item" (click)="stop(execution)"
              [appRole]="['ROLE_DEPLOY']"
              [disabled]="!(execution.taskExecutionStatus !== 'COMPLETE' && execution.taskExecutionStatus !== 'ERROR')">
        Stop task
      </button>
      <button class="action-item" (click)="cleanup([execution])"
              [appRole]="['ROLE_DESTROY']">
        Clean up task execution
      </button>
      <button class="action-item" grafanaDashboardTaskExecution [taskExecution]="execution">
        Grafana Dashboard
      </button>
      <button class="action-item" wavefrontDashboardTaskExecution [taskExecution]="execution">
        Wavefront Dashboard
      </button>
    </clr-dg-action-overflow>
  </clr-dg-row>
  <clr-dg-placeholder>No results found.</clr-dg-placeholder>
  <clr-dg-footer>
    <clr-dg-pagination #pagination
                       [clrDgTotalItems]="page?.total"
                       [clrDgPageSize]="context.size"
                       [clrDgPage]="context.current">
      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Task executions per page</clr-dg-page-size>
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{page?.total}} task executions
    </clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>
<app-execution-stop #stopModal (onStopped)="refresh(state)"></app-execution-stop>
<app-execution-cleanup #cleanModal (onCleaned)="refresh(state)"></app-execution-cleanup>
